import { action, computed, makeAutoObservable, observable, toJS } from 'mobx'

import { Appearance } from 'react-native'

import { lightTheme, darkTheme } from '../themes'

const validTheme = {dark: darkTheme, light: lightTheme}

export default class {
  //from persist
  name = Appearance.getColorScheme() || 'dark'

  _theme = this.name == 'dark'? darkTheme: lightTheme

  constructor() {
    makeAutoObservable(this, { 
      name: observable,
      setTheme: action,
      switchTheme: action,
      theme: computed
    })
  }

  setTheme(t) {
    if(validTheme.keys.indexOf(t) != -1) {
      this.name = t
      this._theme = validTheme[this.name]
    }
  }

  switchTheme() {
    this.name = this.name == 'dark'? 'light': 'dark'
    this._theme = validTheme[this.name]
  }

  get theme() {
    return toJS(this._theme)
  }
}